<template>
  <el-dialog
    :title="`${title}面试题`"
    :visible.sync="isDialogShow"
    width="40%"
    @click="closeFn"
  >
    <el-form ref="form" inline :model="formData" :rules="rules" label-width="120px">
      <el-form-item label="面试题标题" prop="title">
        <el-input v-model="formData.title" style="width: 100%" placeholder="请输入面试题标题" />
      </el-form-item>
      <el-form-item label="面试题描述" prop="desc">
        <el-input v-model="formData.desc" style="width: 95%" placeholder="请输入面试题描述" />
      </el-form-item>
      <el-form-item label="创建者" prop="authur">
        <el-input v-model="formData.authur" style="width: 100%" placeholder="请输入创建者" />
      </el-form-item>
      <el-form-item label="所属学科" prop="subjectid">
        <el-select v-model="formData.subjectid" placeholder="请选择学科">
          <el-option v-for="item in subjectList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="创建日期" prop="createtime" class="picker">
        <el-date-picker
          v-model="formData.createtime"
          type="date"
          placeholder="选择日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd HH:mm:ss"
        />
      </el-form-item>
      <el-form-item label="面试题内容" prop="content">
        <el-input v-model="formData.content" type="textarea" style="width: 95%" placeholder="请输入面试题内容" />
      </el-form-item>
      <el-form-item label="影响因子" prop="sci">
        <el-input-number v-model.number="formData.sci" :min="1" :max="100" />
      </el-form-item>
      <el-form-item label="是否关注" prop="ishot">
        <el-switch v-model="formData.ishot" :active-value="1" :inactive-value="2" />
      </el-form-item>
      <el-form-item label="是否置顶" prop="istop">
        <el-switch v-model="formData.istop" :active-value="1" :inactive-value="2" />
      </el-form-item>
      <el-form-item label="面试题封面" prop="pic">
        <image-upload v-model="formData.pic" />
      </el-form-item>

    </el-form>
    <el-row type="flex" justify="center" style="margin-top: 40px">
      <el-col :span="12" type="flex" class="btn-warp">
        <el-button
          size="small"
          style="margin-right: 30px"
          type="primary"
          @click="confirmFn"
        >确 认</el-button>
        <el-button size="small" @click="isDialogShow = false">取 消</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
export default {
  name: 'DialogBox',
  data() {
    return {
      // 控制弹窗显示与隐藏
      isDialogShow: false
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.el-dialog {
  .btn-warp {
    text-align: center;
  }
  .el-select {
    width: 187px;
  }
  .picker {
   ::v-deep .el-date-editor {
      width: 190px;
    }
  }
}
</style>
